<template>
  <div class="mask" id="mask">
    <div class="item" :style="obj"></div>
    <div class="tipAction">
      <p class="txt">点击“登录”进入系统</p>
      <div class="tipButton" @click="kown">知道了</div>
      <div class="triangle-up" id="triangle-up"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      obj: {
        type: Object,
        default: {},
      },
    },
    components: {},
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {
      scrollFunc(e) {
        e = e || window.event;
        if (e && e.preventDefault) {
          e.preventDefault();
          e.stopPropagation();
        } else {
          e.returnvalue = false;
          return false;
        }
      },
      kown() {
        window.localStorage.setItem('kwon', true);
        this.$emit('know');
      },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
      let mask = document.getElementById('mask');
      mask.addEventListener('mousewheel', e => {
        this.scrollFunc(e);
      });
    },
    beforeUpdate() {},
    updated() {},
    activated() {},
    deactivated() {},
    beforeDestroy() {},
    destroyed() {},
  };
</script>

<style lang="scss" scoped>
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    .item {
      position: absolute;
      z-index: 1001;
      background-color: transparent;
      border: 2px dashed #fff;
      border-radius: 4px;
      padding: 5px;
    }
    .tipAction {
      color: white;
      font-size: 14px;
      font-family:
        'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      position: absolute;
      left: 1136px;
      width: 200px;
      top: 80px;
      padding: 6px;
      border-radius: 4px;
      border: 1px dashed #fff;
      .txt {
        overflow: hidden;
        word-break: break-all;
        line-height: 20px;
        min-height: 100px;
      }
      .tipButton {
        border: 1px solid #fff !important;
        width: 56px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 25px;
        margin: 10px auto 5px auto;
        border-radius: 2px;
        cursor: pointer;
      }
      #triangle-up {
        position: absolute;
        left: 95px;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 10px dashed transparent;
        border-right: 10px dashed transparent;
        border-bottom: 10px dashed #fff;
      }
    }
  }
</style>
